<template>
  <view>
    <view :style="{ height: statusBarHeight + 'px' }" />

    <view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
      <view v-if="leftIcon" class="left-icon" @click="navigateBack"></view>
      <view class="title">{{ title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    navBarHeight: {
      type: Number,
      default: 40,
    },
    statusBarHeight: {
      type: Number,
      default: 0,
    },
    leftIcon: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    navigateBack() {
      this.$tab.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;
  position: relative;

  .left-icon {
    left: 0px;
    width: 48px;
    height: 100%;
    position: absolute;
    justify-content: flex-start;
    box-sizing: border-box;

    &::before {
      content: "";
      left: calc(50% - 6px);
      top: calc(50% - 6px);
      height: 10px;
      width: 10px;
      border-width: 2px 2px 0 0;
      border-color: #606266;
      border-style: solid;
      -webkit-transform: matrix(-0.5, 0.5, 0.5, 0.5, 0, 0);
      transform: matrix(-0.5, 0.5, 0.5, 0.5, 0, 0);
      position: absolute;
    }
  }

  .title {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0px 16px;
  }

  .title:first-child {
    text-align: left;
  }
}
</style>
